/* 学习目标：了解  */
// 1. 增加组件嵌套解构
// 2. 调试困难
import React from 'react';
const { Provider, Consumer } = React.createContext();
const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();
export default function App() {
  return (
    <div>
      <h1>父组件</h1>

      <Provider value={[1, 2, 3]}>
        <Son />
      </Provider>
    </div>
  );
}

function Son() {
  return (
    <div>
      <h2> 儿子</h2>
      <Provider2 value="这是一条有Son发给SonSonSon的消息">
        <SonSon />
      </Provider2>
    </div>
  );
}

function SonSon() {
  return (
    <div>
      <h2> 孙子</h2>
      <Consumer>
        {(data) => {
          return data.map((item) => <h1 key={item}>{item}</h1>);
        }}
      </Consumer>
      <hr />
      <SonSonSon />
    </div>
  );
}

function SonSonSon() {
  return (
    <>
      <h3>孙子的儿子</h3>
      <Consumer2>
        {(data) => (
          <h4>
            <i>{data}</i>
          </h4>
        )}
      </Consumer2>
    </>
  );
}
